<template>
  <div>
    <!--头部-->
    <Header />
    <!--end-->

    <div class="login-content">
      <div class="login-flex">
        <div class="login-left">
          <p>万民用户知心托付&nbsp;&nbsp;&nbsp;&nbsp;<AvgRate />历史年化收益</p>
          <p>千万级技术研发投入&nbsp;&nbsp;&nbsp;&nbsp;亿级注册资本平台  </p>
        </div>
        <!---->
        <div class="login-box">
          <h3 class="login-title">用户注册</h3>
          <form action="" id="register_Submit">
            <div class="alert-input">
              <input type="text" class="form-border user-num"
                     @blur="checkPhone"
                     v-model="phone" name="mobile" placeholder="请输入11位手机号">
              <p class="prompt_num">{{phoneTip}}</p>
              <input type="password"
                     @blur="checkPwd"
                     v-model="pwd"
                     placeholder="请输入6-20位英文和数字混合密码" class="form-border user-pass" autocomplete name="password">
              <p class="prompt_pass">{{pwdTip}}</p>
              <div class="form-yzm form-border">
                <input class="yzm-write" type="text"
                       @blur="checkCode"
                       v-model="code"
                       name="" placeholder="输入短信验证码">
                <input class="yzm-send" type="text"
                       @click="sendSms"
                       v-model="sendText"
                       :disabled="!isPhone || cding" id="yzmBtn" readonly="readonly" >
              </div>
              <p class="prompt_yan">{{codeTip}}</p>
            </div>
            <div class="alert-input-agree">
              <input type="checkbox" v-model="agree" />
              我已阅读并同意<a href="javascript:;" target="_blank">《动力金融网注册服务协议》</a>
            </div>
            <div class="alert-input-btn">
              <input type="button"
                     :style="{background: bgColor}"
                     :disabled="!canRegister"
                     @click="register"
                     class="login-submit" value="注册">
            </div>
          </form>
          <div class="login-skip">
            已有账号？ <router-link to="/login">登录</router-link>
          </div>
        </div>

      </div>
    </div>

    <!--公共底部-->
    <Footer />
  </div>
</template>

<script>
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import AvgRate from "@/components/AvgRate";
import Vue from "vue";
import reg from "@/utils/reg";
import qs from 'qs'

export default {
  name: "Register",
  components: {AvgRate, Footer, Header},
  data() {
    return {
      phone: '',
      pwd: '',
      code: '', // 用户输入的验证码
      realCode: '', // 真实验证码
      agree: false,

      phoneTip: '',
      pwdTip: '',
      codeTip: '',
      intervalTime: 5,
      cding: false,
    }
  },
  computed: {
    isPhone() {
      return reg.phone.test(this.phone);
    },
    isPassword() {
      return reg.password.test(this.pwd)
    },
    isCode() {
      return reg.code.test(this.code);
    },
    canRegister() {
      return this.isPhone
          && this.isPassword
          && this.isCode
          //&& this.agree;
    },
    bgColor() {
      return this.canRegister ? '' : '#ccc';
    },
    sendText() {
      if (this.intervalTime == 5) {
        return "发送验证码";
      } else {
        return "再次发送" + this.intervalTime + '...'
      }

    }
  },
  methods: {
    sendSms() {
      this.cding = true;

      // 3秒之后执行指定函数，只执行1次
      //setTimeout(() => { alert("执行定时器") }, 3000)
      // 每秒执行1次
      let flag = setInterval(() => {
        this.intervalTime--
        if (this.intervalTime == 0) {
          clearInterval(flag)
          this.intervalTime = 5
          this.cding = false;
        }
      }, 1000)

      Vue.axios.get("/sms/reg/" + this.phone).then(resp => {
        console.log(resp);
        this.realCode = resp.data;
      })
    },
    register() {
      // 判断验证码是否正确
      if (this.code != this.realCode) {
        alert("验证码不正确！");
        return ;
      }
      // 是否勾选同意协议
      if (!this.agree) {
        alert("请勾选同意协议！");
        return ;
      }

      /*
        data是对象时，以JSON格式发送, 后台接受参数必须使用@RequestBody User user
        如果希望数以以普通表单方式提交，格式必须为："key=value&key=value"
       */
      let data = {
        phone: this.phone,
        pwd: this.pwd,
        code: this.code
      };
      // {a:1,b:2} ==> "a=1&b=2"
      data = qs.stringify(data);

      Vue.axios.post('/user/register', data).then(({data}) => {
        if (data.success) {
          this.$router.push("/login")
        }
        if (data.msg) {
          alert(data.msg);
        }
      })

    },
    checkPhone() {
      if (!this.phone.trim()) {
        this.phoneTip = "请输入手机号！";
      } else if (!this.isPhone) {
        this.phoneTip = "手机格式不正确！";
      } else {
        this.phoneTip = '';

        Vue.axios.get("/user/check/" + this.phone).then(resp=>{
          if (resp.data) {
            this.phoneTip = "手机已被注册！";
          }
        })
      }
    },
    checkPwd() {
      if (!this.pwd) {
        this.pwdTip = "请输入密码！";
      } else if (!this.isPassword) {
        this.pwdTip = "密码必须同时包含字母和数字，且长度在6~20之间";
      } else {
        this.pwdTip = '';
      }
    },
    checkCode() {
      if(!this.code) {
        this.codeTip = "请输入验证码！";
      } else if (!this.isCode) {
        this.codeTip = "验证码必须是6位数字"
      } else {
        this.codeTip = '';
      }
    }
  }
}
</script>

<style scoped>

</style>